<template>
  <div class="fixed right-[24px] bottom-[40px] z-[50]">
    <div>
      <div class="cicle-btn" @click="handleAiClick">
        <QuickPostIcon />
      </div>
    </div>
    <div class="mt-[8px]">
      <BackTopIcon @click="scrollToTop" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import BackTopIcon from '@/components/icons/home/BackTopIcon.vue';
  import QuickPostIcon from '@/components/icons/home/QuickPostIcon.vue';

  const router = useRouter();

  const handleAiClick = () => {
    router.push('/generator');
  };

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

<style scoped lang="scss">
  .cicle-btn {
    width: 48px;
    height: 48px;
    border-radius: 35px;
    background: linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      background: linear-gradient(90deg, #f78647 0%, #e1603d 100%);
    }
  }
</style>
